<template>
   <view class="container " style="background-color:#FFFFFF;height: 100%;padding: 20rpx;" >
			<u-form :model="form" ref="uForm"  >
				<uni-transition :duration="1000" :mode-class="'slide-bottom'"  :show="true" >
					<u-form-item  prop="suggest">
						<view class="fontWeight c666 text24">问题描述:</view>
						<view class="" style="margin-top: 20rpx;" >
							<u-input  v-model="form.suggest" type="textarea" :border="border" height="500" placeholder="请输入您的问题描述以方便我们采取意见或建议" @input= "inputContent" />
						</view>
						<view class="text-right" >{{length}}/500</view>
					</u-form-item>
				</uni-transition>
				<uni-transition :duration="1500" :mode-class="'slide-bottom'"  :show="true" >
					<u-form-item  prop="phone">
						<view class="fontWeight c666 text24">联系方式:</view>
						<view class="" style="margin-top: 20rpx;" >
							<u-input  v-model="form.phone" type="number" :border="border"  placeholder="请输入您的联系方式" />
						</view>
					</u-form-item>
				</uni-transition>
			</u-form>
			<uni-transition :duration="2000" :mode-class="'slide-bottom'"  :show="true" >
			    <u-button @click="submit" type="primary">提交</u-button>
			</uni-transition>
		
		<!-- 确认弹窗:title-style="{color: 'red'}" -->
		<u-modal v-model="show"  @cancel="cancel" @confirm="confrim"  :content="content" :mask-close-able='true' :async-close="true" :show-cancel-button="true"></u-modal>
   </view>
   
   
</template>
<script>
	export default {
		data() {
			return {
				userInfo:'',//用户信息
				id:'',//用户id
				business_specific_type:'',
				user_type:'',
				
				rules: {
					suggest: [{required: true,message: '请输入您的问题描述',trigger: ['blur']}],//问题描述校验
					phone: [{required: true,message: '请输入您的手机号',trigger: ['blur']},{//手机联系方式校验
						pattern: /^1[34578]\d{9}$/,
						message: '请输入正确的手机格式',
						trigger: ['change', 'blur'],
					}]
				},
				show:false,//是否显示确认弹窗
				content:'确认提交您的意见反馈吗',//确认弹窗中间显示的内容
				form:{
					suggest:'',//建议内容
					phone:''//联系方式
				},//form表单
				textArea:'',//输入的内容
				length:'0',//表单输入长度
				border:true//是否显示边框
			}
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		onLoad() {
			let userInfo = uni.getStorageSync('userInfo');
			if (userInfo) {
				this.userInfo = userInfo,
				this.id = userInfo ? userInfo[0].id : '',
				this.business_specific_type=userInfo[0].business_specific_type
				this.user_type = userInfo.user_type
			}
			console.log('手动阀’',this.userInfo,this.id,this.business_specific_type,this.user_type)
		},
		methods: {
			// 输入内容事件
			inputContent:function(){
				console.log('获取你输入的内容',this.form.suggest,this.form.suggest.length)
				this.length=this.form.suggest.length
				if(this.length>500){
					return
				}
			},
			
			// 意见提交
			submit:function(){
				this.$refs.uForm.validate(valid => {
					if (valid) {
						console.log('验证通过');
						this.show=true//显示确认弹窗
					} else {
						console.log('验证失败');
					}
				});
			},
			
			confrim:function(){
				var _self=this
				var type=''
				if(this.user_type=='自然人'){
					type=1
				}else {
					type=2
				}
				this.$.tipLoading('提交中')
				uni.request({
					method: 'POST',
					url: 'https://jizhang.xqyu.cn/index.php/api/index/create_feedback',
					dataType: 'json',
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					data: {
						phone:_self.form.phone,
						content:_self.form.suggest,
						type:type,
						id:_self.id
					},
					success: function(res) {
						console.log('是否提交成功',res)
						setTimeout(function(){
							_self.$.hideLoading()
						},1500)
						if (res.data.code == 1) {
							setTimeout(function(){
								_self.show=false
								uni.navigateBack({
									delta:1
								})
							},2000)
							_self.$.successToast(res.data.msg)
						}else {
							_self.show=false
							_self.$.toast('提交失败.请稍后重试')
						}
					}
				})
			},
			cancel:function(params){
				this.show=false//关闭弹窗
				console.log('获取过来的方法参数',params)
			}
		}
	}
</script>
<style lang="scss" scoped>
</style>

